<!--
 * @Description: 
 * @Author: 胡涛
 * @Date: 2024-01-09 22:10:53
 * @LastEditors: 胡涛
 * @LastEditTime: 2024-01-09 22:31:02
-->
<template>
  <a-modal
    :open="visible"
    :keyboard="false"
    :maskClosable="false"
    :title="title"
    @cancel="onCancel"
    @ok="onSubmit"
    :confirmLoading="submitLoading"
    :width="650"
  >
    <a-spin :spinning="loading">
      <a-form
        layout="horizontal"
        :labelCol="{ span: 4 }"
        :wrapperCol="{ span: 19 }"
        v-if="formModel.id"
      >
        <a-form-item label="所属组织架构">
          <a-input :disabled="true" :value="formModel.depName"></a-input>
        </a-form-item>
        <a-form-item label="部门人员">
          <user-select v-model:value="formModel.enCode" disabled></user-select>
        </a-form-item>
        <a-form-item label="岗位职务">
          <dictionary-select
            name="Platform.BasePost"
            v-model:value="formModel.postName"
            size="small"
          />
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script lang="ts" setup>
import { OrganizationDto } from "@/api/organize/types";
import api from "@/api/organize/organization";
import { onMounted, ref, watch } from "vue";

const props = defineProps({
  visible: { type: Boolean, required: true },
  id: { type: String, required: true },
});
const title = ref("修改部门人员岗位");
const emits = defineEmits(["update:visible", "close", "success"]);
const submitLoading = ref(false);
const loading = ref(true);
const formModel = ref<Partial<OrganizationDto>>({});

/**
 * 提交
 */
const onSubmit = async () => {
  try {
    submitLoading.value = true;
    await api.update(props.id, formModel.value);
    emits("success");
    emits("update:visible", false);
  } finally {
    submitLoading.value = false;
  }
};

/**
 *
 */
const onCancel = () => {
  emits("close");
  emits("update:visible", false);
};

onMounted(() => {
  loading.value = true;
  api
    .get(props.id)
    .then((res) => {
      formModel.value = res;
    })
    .finally(() => {
      loading.value = false;
    });
});
</script>

<style lang="less" scoped>
.users {
  border-top: 1px solid #ddd;
  border-left: 1px solid #ddd;
  .row {
    border-bottom: 1px solid #ddd;
    &-header {
      background: #f8f8f8;
    }
    .col {
      border-right: 1px solid #ddd;
      padding: 5px;
    }
  }
}
</style>
